/* 
    Document   : layout
    Created on : Aug 12, 2010, 2:39:01 PM
    Author     : yannis
    Description:
        Purpose of the stylesheet follows.
*/

html {
}

body {
    overflow: hidden;
}
header.main {
    width: 100%;
    height: 35px;
    position: fixed;
    margin-top: 0;
}
header.main h1.title{
    display:inline-block;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom:2px;
}
header.main p.slogan {
    display: inline-block;
    vertical-align: middle;
}
#searchForm {
    float: right;
    position: absolute;
    top: 4px;
    right: 5%;
}

#searchText {
        display: inline-block;
    vertical-align: top;
    height: 20px;
    border: none;
    margin: 0 -3px 0 0;
}

#searchReset {
    display: inline-block;
    vertical-align: top;
    height:26px;
    margin: 0 0 0 0;
}

nav {
}

#wrapper {
    
}
section.main {
    margin-top: 55px;
    position:absolute;
    vertical-align: top;
    width: 60%;
    margin-left: 2%;
}
section.main.min {
    -webkit-animation-name: shrink;
    -webkit-animation-duration: 300ms;
    width: 70%;
    margin-left: 2.5%;
}
section.main.max {
    width: 90%;
    margin-left: 5%;
    -webkit-animation-name: expand;
    -webkit-animation-duration: 300ms;
}

@-webkit-keyframes expand {
    from {
        width: 70%;
        margin-left: 2.5%;
    }
    to {
        width: 90%;
        margin-left: 5%;
    }
}

@-webkit-keyframes shrink {
    from {
        width: 90%;
        margin-left: 5%;
    }
    to {
        width: 70%;
        margin-left: 2.5%;
    }
}

div.block {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
div#messages {
    overflow: auto;
    height: 300px;
}
article {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}
header.message {
    width: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 20px;
}
div.input {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
}
input#inputText {
    display: inline-block;
    vertical-align: top;
    width: 70%;
    height: 20px;
    border: none;
    margin: 0 -3px 0 0;
}
button#inputSend {
    display: inline-block;
    vertical-align: top;
    width: 19%;
    height:26px;
    margin: 0 0 0 0;
}
/*
aside {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    float: right;
    top: 0;
    margin-top: 35px;
    width: 0;
    height: calc(100%-35px);
}
*/
article.contact {
    width: 90%;
    margin: auto;
    margin-bottom:2%;
    -webkit-column-break-inside: avoid;
}

article.contact span {
    padding-left: 2px;
    display: block;
}


#searchContacts {
    display: inline-block;
    right: 18%;
}
#searchContent {
    overflow: hidden;
    height: 0;
}
#searchContacts header {
    text-align: center;
    width: 100%;
}
#searchContacts header a {
    width: 100%;
}
#searchContent.maximized {
    height: 300px;
    -webkit-animation-name: maximize;
    -webkit-animation-duration: 300ms;
    overflow: auto;
}
#searchContent.minimized {
    height: 0px;
    -webkit-animation-name: minimize;
    -webkit-animation-duration: 300ms;
    overflow: hidden;
}


#roster {
    float: right;
    position: fixed;
    height: 100%;
    right: 0;
    margin-top: 35px;
    padding: 0;
    overflow:auto;
}

#roster.maximized {
    opacity: 1;
    width: 25%;
    -webkit-animation-name: maximize;
    -webkit-animation-duration: 300ms;

}
#roster.minimized {
    opacity:0;
    width: 0;
    margin-right: 0;
    -webkit-animation-name: minimize;
    -webkit-animation-duration: 300ms;

}
#rosterContent {
}
#roster header {
    text-align: center;
    width: 100%;
}
#roster header a {
    width: 100%;
}


footer {
    bottom: 0;
    position: fixed;
    height: 1.5em;
    width: 100%;
    bottom: 0;
}
footer p {
    padding-left: 10px;
}


@-webkit-keyframes maximize {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
        width: 25%;
    }
}

@-webkit-keyframes minimize {
    from {
        opacity: 1;
        width: 25%;
    }
    to {
        opacity: 0;
        width: 0;
    }
}